<template>
    <Head>
        <Title>Course Details</Title>
    </Head>
    <PageHeader title="Course Details" subtitle="Course Details" :image="`${$config.public.baseUrl}images/bg/home1/3.png`"/>
    <div class="coursedetails coursedetails--style1 padding-top padding-bottom">
        <div class="container" data-aos="fade-up" data-aos-duration="800">
            <Details></Details>
        </div>
    </div>

    <div class="coursedetails coursedetails--style2 padding-top padding-bottom brand1-bg-1">
        <div class="container" data-aos="fade-up" data-aos-duration="800">
            <CourseCurriculum></CourseCurriculum>
        </div>
    </div>

    <section class="team team--details padding-top">
        <div class="container" data-aos="fade-up" data-aos-duration="600">
            <Instructor />
        </div>
    </section>

    <section class="studentreview padding-top">
        <div class="container" data-aos="fade-up" data-aos-duration="600">
            <RealReview :reviews="reviews" />
        </div>
    </section>

    <section class="course course--style1 padding-top">
        <div class="container" data-aos="fade-up" data-aos-duration="500">
            <PopularCourses :courses="courses" />
        </div>
    </section>

    <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
        <div class="container">
            <Newsletter />
        </div>
    </div>
</template>

<script>
import PageHeader from '@/components/partials/PageHeader.vue'
import Details from '@/components/modules/course-details/Details.vue'
import CourseCurriculum from '@/components/modules/course-details/CourseCurriculum.vue'
import Instructor from '@/components/modules/course-details/Instructor.vue'
import RealReview from '@/components/modules/course-details/RealReview.vue'
import PopularCourses from '@/components/modules/course-details/PopularCourses.vue'
import Newsletter from "@/components/partials/newsletters/Newsletter.vue"

export default {
    scrollToTop: true,
    components: { PageHeader, Details, CourseCurriculum, Instructor, RealReview, PopularCourses, Newsletter },
    async setup() {
        const { axios } = fetchData();

        const coursesResponse = await axios.get('/home_courses.json')
        const courses = coursesResponse.data

        const reviewsResponse = await axios.get('/reviews.json')
        const reviews = reviewsResponse.data

        return {
            reviews,
            courses
        }
    },
}
</script>